<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
        /* 
            将class为red的元素设置为红色(字体)
        */
        
        .red {
            color: red;
        }
        /* 
            将class为red的div字体大小设置为30px
        */
        /* 
            交集选择器
                作用: 选中同时复合多个条件的元素,同时写多个选择器,元素必须是满足多个选择器的条件,才能被选中
                语法: 选择器1选择器2选择3选择器n{}
                注意: 交集选择器中如果有元素选择器,必须使用元素选择器开头

        */
        div .red {
            font-size: 30px;
        }

        .a.b.c {
            color: blue;
        }

        /* 
            选择器分组(并集选择器)
                作用:同时选择多个选择器对应的元素
                语法:选择器1,选择器2,选择器n{}
        */
        h1, span {
            color: green;
        }

    </style>
    </head>

    <body>
        <div class="red">我是div</div>
        <p class="red">我是p元素</p>

        <div class="red2 a b c">我是div2</div>

        <span>哈哈</span>

        <h1>标题</h1>

    </body>

</html>